<template>
  <div>
    <!-- 单一根，指令才能生效，必须 v-modaldrag --->

    <el-form :model="project" ref="projectForm" >


      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="项目简称" name="name" ><el-input v-model:value="project.name" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="项目编码" name="code" ><el-input v-model:value="project.code" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="24"><el-form-item label="项目全称" name="fullName" :label-col="{ span: 3 }"><el-input v-model:value="project.fullName" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="项目地点" name="address" ><el-input v-model:value="project.address" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="经度" name="lng" ><el-input v-model:value="project.lng" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="纬度" name="lat" ><el-input v-model:value="project.lat" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="项目类型" name="projectKind" ><el-input v-model="project.projectKindCaption" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="所在行政区" name="districtCode" ><el-input v-model="project.districtCodeCaption" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="项目经理" name="projectManager" ><el-input v-model:value="project.projectManager" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="立项日期" name="initialDate" ><el-input v-model:value="project.initialDate" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="中标日期" name="bidDate" ><el-input v-model:value="project.bidDate" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="合同金额" name="contractAmount" ><el-input v-model:value="project.contractAmount" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="项目周期" name="projectMonths" ><el-input v-model:value="project.projectMonths" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="项目建设内容" name="projectContent" ><el-input type='textarea' v-model="project.projectContent" readonly :autosize="true" :input-style="underlineElInputStyle" autosize/></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="项目状态" name="projectStatus" ><el-input v-model="project.projectStatusCaption" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="项目评分" name="projectScore" ><el-input v-model:value="project.projectScore" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="业主单位" name="projectOwner" ><el-input v-model:value="project.projectOwner" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="联系人姓名" name="linkMan" ><el-input v-model:value="project.linkMan" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="联系人电话" name="linkPhone" ><el-input v-model:value="project.linkPhone" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="12"><el-form-item label="是否中止" name="abort" ><el-checkbox v-model:checked="project.abort" disabled class="mydisabled" ></el-checkbox></el-form-item></el-col>



        <el-col :span="12"><el-form-item label="顺序号" name="ordnum" ><el-input v-model:value="project.ordnum" readonly :input-style="underlineElInputStyle" /></el-form-item></el-col>

      </el-row>

      <el-row :gutter="formGutter">

        <el-col :span="24"><el-form-item label="备注" name="remarks" :label-col="{ span: 3 }"><el-input type='textarea' v-model="project.remarks" readonly :autosize="true" :input-style="underlineElInputStyle" autosize/></el-form-item></el-col>

      </el-row>
    </el-form>


  </div>
</template>

<script lang="ts" setup>
/*
 * @author: user
 * @date: 2021-11-25 16:55:20
 * @template: dayu-code-builder
*/
import { onMounted, reactive, computed } from 'vue'
import {underlineElInputStyle} from '@/utils/constants';
import { Project, projectService } from '@/api/demo/ProjectService'
import { IForm, formColGutter } from '@/common/FormModal'

const props = defineProps({
  id: Number
});
const formGutter = formColGutter;
/** 接口数据（和接口返回数据对应） */
const projectData = reactive({project:<Project>{}, codeTypes:{}, nameTypes:{}});
/** 表单数据 */
const project = computed(() => projectData.project);

/** 获取表单数据 */
async function getFormData() {
  if (!props.id) return;
  try {
    let response: any = await projectService.getProjectBO(props.id as number);
    projectData.project = response.data.data || {};
    projectData.codeTypes = response.data.codeTypes;
    projectData.nameTypes = response.data.nameTypes;
  } catch (ex: any) {
    console.error("await error");
    console.error(ex);
  }
}

onMounted(() => {
  getFormData();
});


</script>

<style scoped>

</style>